<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="生成首页" name="first">
        <div>
          <el-form ref="form" label-width="120px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="首页模版文件" prop="cnname">
                  <el-input v-model="currentThemeName" style="width: 500px" :readonly="true"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="formSave">一键生成首页</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="生成栏目" name="second">
        <div>
          <el-form ref="templateForm"  label-width="120px" v-loading="loading">
            <el-row>
              <el-col :span="24">
                <el-form-item label="上级栏目">
                  <treeselect
                    v-model="category.id"
                    :options="categoryOptions"
                    :normalizer="normalizer"
                    :show-count="true"
                    placeholder="选择上级栏目"
                    style="width:500px;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="是否更新子栏目">
                  <el-radio v-model="category.updateChild" label="1">是</el-radio>
                  <el-radio v-model="category.updateChild" label="0">否</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="templateFormSave">生成</el-button>
          </div>
          <div style="padding-top: 200px">&nbsp;</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getCategoryList} from "@/api/cms/demo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {generateCategory, generateIndex, getLoadParam} from "@/api/cms/statics";
import category from "@/views/cms/category";
export default {
  name: "statics",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: false,
      currentThemeName: "",
      activeName: 'first',
      dialogVisible: false,
      dialogImageUrl:'',
      categoryOptions: [],
      category:{
        id:"-1",
        updateChild:"1",
      }
    };
  },
  created() {
    this.loadParam();
    this.getTreeselect();
  },
  methods: {
    handleClick(tab, event) {
    },
    loadParam(){
      getLoadParam().then(resp=>{
        this.currentThemeName = '/templates/' + resp.data.currentTheme.themePath + '/index.html'
      })
    },
    templateFormSave() {
      this.loading = true;
      generateCategory(this.category).then(resp=>{
        if(resp.code == 200){
          this.$message({
            message: '生成成功',
            type: 'success'
          });
        }
        this.loading = false;
      })
    },
    formSave() {
      generateIndex().then(response=>{
        if(response.code == 200){
          this.$message({
            message: '生成成功',
            type: 'success'
          });
        }
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.cnname,
        children: node.children
      };
    },
    getTreeselect() {
      getCategoryList().then(response => {
        this.categoryOptions = [];
        const category = { id: '-1', cnname: '全部栏目', children: [] };
        category.children = this.handleTree(response.data, "id");
        this.categoryOptions.push(category);
      });
    },

  }
}
</script>

<style scoped>
.dialog-footer{
  padding-left: 20px;
}
.label{
  width: 200px;
}
</style>
